/* eslint-disable react/prop-types */
import React, { useState, useEffect } from 'react';
import { EchartsComp } from './echarts';
import { yearlyMaintenancePlans, predictivePower, deviationIndex, deviationPower } from './helper';
import { useThemeChange } from '@/hooks';

export function YearlyMaintenancePlansEcharts({ data, startDate, endDate, handleObj }) {
  const [config, setConfig] = useState();
  const { theme } = useThemeChange();
  useEffect(() => {
    setConfig({ ...yearlyMaintenancePlans(data, startDate, endDate) });
  }, [data]);
  useEffect(() => {
    setTimeout(() => {
      setConfig({ ...yearlyMaintenancePlans(data, startDate, endDate) });
    }, 1);
  }, [theme]);
  return <EchartsComp config={config} handleObj={handleObj} />;
}

export function PredictivePowerEcharts({ data = {}, capacity, startDate, endDate }) {
  const [config, setConfig] = useState();
  const { theme } = useThemeChange();
  useEffect(() => {
    setConfig({ ...predictivePower(data, capacity, startDate, endDate) });
  }, [data]);
  useEffect(() => {
    setTimeout(() => {
      setConfig({ ...predictivePower(data, capacity, startDate, endDate) });
    }, 1);
  }, [theme]);
  return <EchartsComp config={config} />;
}

export function DeviationIndexEcharts({ data = [] }) {
  const [config, setConfig] = useState();
  const { theme } = useThemeChange();
  useEffect(() => {
    setConfig({ ...deviationIndex(data) });
  }, [data]);
  useEffect(() => {
    setTimeout(() => {
      setConfig({ ...deviationIndex(data) });
    }, 1);
  }, [theme]);
  return <EchartsComp config={config} />;
}

export function DeviationPowerEcharts({ data = [] }) {
  const [config, setConfig] = useState();
  const { theme } = useThemeChange();
  useEffect(() => {
    setConfig({ ...deviationPower(data) });
  }, [data]);
  useEffect(() => {
    setTimeout(() => {
      setConfig({ ...deviationPower(data) });
    }, 1);
  }, [theme]);
  return <EchartsComp config={config} />;
}
